<template>
    <div class="camera-player" ref="cameraPlayerRef"></div>
</template>
<script>
import CameraUtils from "@/utils/cameraUtils";
export default {
    name: "CameraPlayer",
    mounted() {
        this.playCamera();
    },
    methods: {
        async playCamera() {
            let title = this.$route.query.title;
            let viewX = this.$route.query.x;
            let viewY = this.$route.query.y;
            let deviceCode = this.$route.query.deviceCode;
            let camera = new CameraUtils(title, viewX, viewY);
            // 获取当前页面可见区域宽高
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;

            camera.startCamera(async () => {
                let videoDom = await window.imosPlayer.createPanelWindow();
                // 窗格默认400*400，通过样式改宽高
                videoDom.style.width = `${viewportWidth}px`;
                videoDom.style.height = `${viewportHeight}px`;

                window.imosPlayer
                    .setVoidClassName(videoDom, {
                        className: "window_class",
                    })
                    .then(e => {
                        console.log(e);
                    });
                let array = document.getElementsByClassName("imosPlayer");
                window.imosPlayer.setViewDomByClassName({
                    className: "window_class",
                    doms: [array[0]],
                });

                window._iframeId = videoDom.id;
                let divDom = this.$refs.cameraPlayerRef;
                divDom.style.width = `${viewportWidth}px`;
                divDom.style.height = `${viewportHeight}px`;
                divDom.appendChild(videoDom);
                window.imosPlayer
                    .playLive(window._iframeId, {
                        camera: deviceCode,
                        title: deviceCode,
                        stream: 1,
                    })
                    .then(e => {
                        console.log("playLive", e);
                    });
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.camera-player {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
